<template>
  <div>
    <el-dialog title="编辑租户信息" :visible.sync="dialogVisible" width="500px" :before-close="closeAddDialog"
      :close-on-click-modal="false">
      <el-form :model="editForm" :rules="rules" ref="refAddForm" label-width="80px">
        <el-form-item size="small" label="租户名称" prop="name">
          <el-input clearable v-model.trim="editForm.name" placeholder="请输入" maxlength="20"
            style="width: 360px"></el-input>
        </el-form-item>

        <!-- <el-form-item size="small" label="姓名" prop="username">
          <el-input clearable v-model.trim="editForm.username" placeholder="请输入姓名" maxlength="10" style="width: 360px">
          </el-input>
        </el-form-item>
        <el-form-item size="small" label="手机号" prop="mobile">
          <el-input clearable v-model.trim="editForm.mobile" placeholder="请输入手机号" maxlength="11" style="width: 360px"
            oninput="value=value.replace(/\D/g,'')">
          </el-input>
        </el-form-item> -->

        <!-- <el-form-item size="small" label="站点名称">
          <el-input v-model.trim="editForm.siteName" maxlength="6" clearable @keydown.native="keydown($event)"
            style="width: 360px" placeholder="请输入站点名称"></el-input>
        </el-form-item>
        <el-form-item label="站点logo" size="small">
          <el-upload class="upload-demo" :action="baseUrl" :headers="headers" :limit="10" :on-success="handleSuccess"
            :before-upload="beforeAvatarUpload">
            <el-button size="small" type="primary">上传图片</el-button>
          </el-upload>
          <img width="100%"
            :src="editForm.siteLogo ? editForm.siteLogo : 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png'"
            alt="" style="width: 55px; height: 50px; margin-top: 10px" />
        </el-form-item> -->

        <el-form-item size="small" label="有效期" prop="time">
          <el-date-picker v-model="editForm.time" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始时间" range-separator="至" end-placeholder="结束时间" :default-time="['00:00:00', '23:59:59']"
            style="width: 360px" :picker-options="forbiddenTime" :clearable="false" unlink-panels>
          </el-date-picker>
        </el-form-item>
        <el-form-item size="small" label="邮箱" prop="email">
          <el-input clearable v-model.trim="editForm.email" placeholder="请输入" maxlength="15"
            style="width: 360px"></el-input>
        </el-form-item>
        <el-form-item size="small" label="地址" prop="address">
          <el-input type="textarea" :rows="2" placeholder="请输入" v-model="editForm.address" maxlength="50" resize="none"
            style="width: 360px" :autosize="{ minRows: 2, maxRows: 5 }"></el-input>
        </el-form-item>
        <el-form-item size="small" label="简介" prop="remarks">
          <el-input type="textarea" :rows="2" placeholder="请输入" v-model="editForm.remarks" maxlength="50" resize="none"
            style="width: 360px" :autosize="{ minRows: 2, maxRows: 5 }"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeAddDialog" class="cancel-button">取 消</el-button>
        <el-button size="small" class="confirm-button" @click="addSubmit" v-preventReClick="1000">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { reqTenantEdit } from "@api/api";
import rulesMixin from "../mixins/rules.js";
import asc from "@utils/asc.js"; //加密解密

export default {
  props: {
    editData: {
      type: Object,
      default: () => { },
    },
  },
  mixins: [rulesMixin],
  data() {
    return {
      forbiddenTime: {
        //禁用当前日期之前的日期
        disabledDate(time) {
          //Date.now()是javascript中的内置函数，它返回自1970年1月1日00:00:00 UTC以来经过的毫秒数。
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      dialogVisible: false,
      editForm: {
        id: "",
        name: "",
        time: "",
        email: "",
        address: "",
        remarks: "",
        username: "",
        mobile: "",
        siteName: "",
        siteLogo: ""
      },
      baseUrl: "",
      headers: {
        token: asc.decrypt(sessionStorage.getItem("token")),
      },
    };
  },
  watch: {
    editData(val) {
      if (val.id) {
        this.editForm.id = val.id;
        this.editForm.name = val.name;
        this.editForm.time = [val.fromTime, val.toTime];
        this.editForm.email = val.email;
        this.editForm.address = val.address;
        this.editForm.remarks = val.remarks;
        this.editForm.username = val.username;
        this.editForm.mobile = val.mobile;
        this.editForm.siteName = val.siteName;
        this.editForm.siteLogo = val.siteLogo;
      } else {
        this.editForm = {
          id: "",
          name: "",
          time: "",
          email: "",
          address: "",
          remarks: "",
          username: "",
          mobile: "",
          siteName: "",
          siteLogo: ""
        };
      }
    },
  },
  methods: {
    // 禁止输入空格
    keydown(e) {
      if (e.keyCode == 32) {
        e.returnValue = false
      }
    },
    // 上传成功
    handleSuccess(e) {
      console.log(e);
      this.editForm.siteLogo = e.data.url;
      // this.$set(this.editForm, "siteLogo",  e.data.url)
    },
    // 上传文件之前的钩子
    beforeAvatarUpload(file) {
      let isJPG = true;
      let isLt = file.size / 1024 < 20000; // 判断是否小于500Kb
      if (file.type !== "image/png" && file.type !== "image/jpeg") {
        this.$modal.notifyWarning("图片只能是 jpg/png 格式!");
        isJPG = false;
        return isJPG;
      } else if (!isLt) {
        this.$modal.notifyWarning("图片大小不能超过20MB! 请重新上传");
        isJPG = false;
      }
      return isJPG;
    },
    // 点击新增
    addSubmit() {
      this.$refs.refAddForm.validate(async (valid) => {
        if (!valid) return ;
        let params = {
          id: this.editForm.id,
          name: this.editForm.name,
          fromTime: this.editForm.time[0],
          toTime: this.editForm.time[1],
          email: this.editForm.email,
          address: this.editForm.address,
          remarks: this.editForm.remarks,
          username: this.editForm.username,
          mobile: this.editForm.mobile,
          siteName: this.editForm.siteName,
          siteLogo: this.editForm.siteLogo,
        };
        const res = await reqTenantEdit(params);
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
        this.$modal.notifySuccess("编辑租户成功");
        this.dialogVisible = false;
        this.$emit("clearEditData");
        this.$refs.refAddForm.resetFields();
        this.$parent.getDataList(); //更新租户列表
      });
    },
    // 点击关闭弹框
    closeAddDialog() {
      this.dialogVisible = false;
      this.$emit("clearEditData");
      this.$refs.refAddForm.resetFields();
    },
  },
  created() {
    this.baseUrl = `${this.$baseURL_copy}file/upload`;
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-upload-list {
  display: none !important;
}
// 日期控件颜色
::v-deep .el-range-editor .el-range-input {
  color: @primaryContentTxt !important;
}
</style>
